<template>
  <view>
    <view class="global-m">
      <view class="d-flex gm-tab">
        <view
          @click="getWapper(item, 'tab')"
          class="gm-tab_li"
          v-for="(item, index) in items"
          :key="index"
        >
          <view :class="{ 'active': item.value == itemIndex }">
            {{ item.name }}
          </view>
        </view>
      </view>
      <view style="height: 15px;"></view>
      <scroll-view class="scroll-view" scroll-y>
        <Waterfalls ref="fallsRef" @imageClick="wapperClick" :column="2" :value="falls"></Waterfalls>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { toRouter } from "@/hooks/utils";
import { ref, onMounted } from "vue";
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";

const page = ref(1), isPullDownRefresh = ref(false);
const falls = ref([]), fallsRef = ref(null);
const itemIndex = ref('choice');
const items = ref([
  {
    name: "精选",
    value: 'choice'
  },
  {
    name: "情侣壁纸",
    value: 'produce-couple'
  },
  {
    name: "收款码",
    value: 'pay-code'
  },
  {
    name: "亲子桌面",
    value: 'kids-desktop'
  },
  {
    name: "更多玩法",
    index: 5,
    value: 'produce-more'
  },
]);
onMounted(() => {
  getWapper(items.value[0])
})
const getWapper = (item, type) => {
  uni.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1500
  })
  itemIndex.value = item.value
  if( type == 'tab' ){
    page.value = 1;
  }
  uni.request({
    url: `/api/wallpaper/oss/page?category=produce&page=${page.value}&size=20&type=` + itemIndex.value,
    method: 'GET',
    success: (res) => {
      res.data.data.forEach((item) => {
        item.image = item.url;
      });
      if(type == 'tab'){
        falls.value = res.data.data;
        fallsRef.value.refresh()
      } else {
        falls.value = falls.value.concat(res.data.data)
      }
      uni.hideToast()
    }
  })
}
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}
onPullDownRefresh(() => {
  console.log("onPullDownRefresh");
  page.value = 1;
  uni.showToast({
    title: '刷新中',
    icon: 'none',
    duration: 1500,
    position: 'top'
  });
  isPullDownRefresh.value = true;
  uni.request({
    url: `/api/wallpaper/oss/page?category=produce&page=${page.value}&size=20&type=` + itemIndex.value
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });

    falls.value = res.data.data;
    fallsRef.value.refresh()
  });
})
onReachBottom(() => {
  console.log("onReachBottom");
  page.value++;
  isPullDownRefresh.value = false;
  getWapper();
})
</script>

<style scoped lang="scss">
.gm-tab_li {
  color: rgba(144, 144, 144, 1);
  font-size: 1rem;
  margin-right: 1rem;
  flex-shrink: 0;
}
.gm-tab {
  overflow: auto;
  .active {
    color: rgba(220, 70, 129, 1) !important;
  }
}
</style>